<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>flexgrid LIST</title>
<link rel="stylesheet" type="text/css" href="flexigrid.pack.css" />
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="flexigrid.pack.js"></script>
<script type="text/javascript">
$(function(){
	$('#flexme1').flexigrid();
	
	var grid=$("#flexme2").flexigrid({
		width: 300,
		//height: 500,
		//url:"#",
		dataType: 'json',
		colModel : [
			//{display: '<input type="checkbox" id="checkAll"/>', name : 'check', width : 50, sortable : false, align: 'center',hide: false},
			{display: '编号', name : 'id', width : 50, sortable : true, align: 'center',hide: false},
			{display: '工作名称', name : 'job_name', width : 250, sortable : false, align: 'center'},
			{display: '工作地址', name : 'work_address', width : 100, sortable : true, align: 'center'},
			{display: '工资', name : 'salary', width : 60, sortable : true, align: 'center'},
			{display: '日期', name : 'date', width : 120, sortable : true, align: 'center'},
			{display: '语言', name : 'language', width : 80, sortable : true, align: 'center'}																
			],
		/*buttons : [
			{name: '添加', bclass: 'add'},
			{name: '删除', bclass: 'delete'},
			{name: '修改', bclass: 'modify'},//, onpress : toolbar},	
			{separator: true}
			],
		searchitems : [
			{display: '编号', name : 'id', isdefault: true},
			{display: '工作名称', name : 'job_name'},
			{display: '工作地址', name : 'work_address'},
			{display: '语言', name : 'language'}
			],*/
		errormsg: '发生异常',
		//sortname: "id",
		//sortorder: "desc",
		//usepager: true,
		title: '信息发布管理',
		//pagestat: '显示记录从{from}到{to}，总数 {total} 条',
		//useRp: true,
		//rp: 10,
		//rpOptions: [10, 15, 20, 30, 40, 100], //可选择设定的每页结果数
		//nomsg: '没有符合条件的记录存在',
		minColToggle: 1, //允许显示的最小列数
		//showTableToggleBtn: true,
		//autoload: true, //自动加载，即第一次发起ajax请求
		resizable: true, //table是否可伸缩
		//procmsg: '加载中, 请稍等 ...',
		//hideOnSubmit: true, //是否在回调时显示遮盖
		blockOpacity: 0.5,//透明度设置
		rowbinddata: true,
		showcheckbox: true
		//gridClass: "bbit-grid"//样式
	});
	
	var mydata = {page:1,total:9,rows:[
		{id:"1",cell:["1","工作名称","工作地址","工资","2007-10-01","中文"]},
		{id:"1",cell:["1","工作名称","工作地址","工资","2007-10-01","中文"]},
		{id:"1",cell:["1","工作名称","工作地址","工资","2007-10-01","中文"]},
		{id:"1",cell:["1","工作名称","工作地址","工资","2007-10-01","中文"]},
		{id:"1",cell:["1","工作名称","工作地址","工资","2007-10-01","中文"]},
		{id:"1",cell:["1","工作名称","工作地址","工资","2007-10-01","中文"]},
		{id:"1",cell:["1","工作名称","工作地址","工资","2007-10-01","中文"]},
		{id:"1",cell:["1","工作名称","工作地址","工资","2007-10-01","中文"]},
		{id:"1",cell:["1","工作名称","工作地址","工资","2007-10-01","中文"]}
		]};
	//grid.addData(mydata);
	var c = $.MyFlexGrid['flexme2'];
	c.grid.addData(mydata);

	$("#btn_test").click(function(){
		var mydata2 = {page:1,total:1,rows:[
		{id:"2",cell:["15","工作名s称","工作地址","工资","2007-10-01","中文"]},
		{id:"12",cell:["13","工作名称","工作地址","工资","2007-10-01","中文"]},
		{id:"13",cell:["12","工作s名称","工作地址","工资","2007-10-01","中文"]},
		{id:"14",cell:["13","工作名称","工作地e址","工d资","200s7-10-01","中d文"]},
		{id:"15",cell:["1","工作名称","工作地址","工资","2007-10-01","中文"]},
		{id:"16",cell:["1s","工作名称","工作地址","工资","2007-10-01","中文"]},
		{id:"178",cell:["1t","工作d名称","工作地址","工资","2007-10-01","中文"]},
		{id:"19",cell:["1d","工作名称","工作地址","工资","2007-10-01","中dg文"]},
		{id:"10",cell:["1t","工作名称","工作地址","工资","2007-10-01","中文d"]},
		{id:"14",cell:["13","工作名称","工作地e址","工d资","200s7-10-01","中d文"]},
		{id:"15",cell:["1","工作名称","工作地址","工资","2007-10-01","中文"]},
		{id:"16",cell:["1s","工作名称","工作地址","工资","2007-10-01","中文"]},
		{id:"178",cell:["1t","工作d名称","工作地址","工资","2007-10-01","中文"]},
		{id:"19",cell:["1d","工作名称","工作地址","工资","2007-10-01","中dg文"]},
		{id:"10",cell:["1t","工作名称","工作地址","工资","2007-10-01","中文d。。。"]}
		]};
		c.grid.addData(mydata2);
	});
});
</script>
</head>
<body>

<table id="flexme1">
		<thead>
			<tr>
				<th width="100">Col 1</th>
				<th width="100">Col 2</th>
				<th width="100">Col 3 is a long header name</th>
				<th width="300">Col 4</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>This is data 1 with overflowing content</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
		</tbody>
	</table>

<table id="flexme2"></table>

<br/>
<input type="button" value="测试加载DATA2" id="btn_test" />
</body>
</html>